<template>
  <div class="video">
    <!-- 视频播放组件 -->
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
    ></video-player>
    <!-- :events="events" -->
    <!-- @fullscreenchange="handlefullscreenchange" -->
    <!-- @ready="playerReadied" -->
  </div>
  <!-- @canplay="onPlayerCanplay($event)"
      @play="onPlayerPlay($event)"
  @timeupdate="onPlayerTimeupdate($event)"-->
</template>

<script>
import $ from "jquery";

import "video.js/dist/video-js.min.css";
import "vue-video-player/src/custom-theme.css";
import "video.js/dist/lang/zh-CN.js";
import "videojs-contrib-hls";
export default {
  name: "videoplayer",
  components: {},
  props: {
    mp4Pic: {
      type: String,
    },
    mp4Url: {
      type: String,
    },
    islike: [Number, String],
    isDpi: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      fileAreaHeight: 400,
      // fileType: "mp4", // 资源的类型
      dpiText: "", //对应清晰度
      //增加监听全屏事件
      // events: ["fullscreenchange"],
      playState: false,
    };
  },
  computed: {
    fileType() {
      if (this.mp4Url) {
        return this.mp4Url.substr(this.mp4Url.lastIndexOf(".") + 1);
      } else {
        return false;
      }
    },
    // 使用计算属性
    playerOptions() {
      if (this.fileType) {
        const playerOptionsObj = {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //视频播放速度
          autoplay: false, // 如果true，浏览器准备好时开始回放。
          // controls: false, //控制条
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
          language: this.$i18n.locale == "zh" ? "zh-CN" : "",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type:
                this.fileType == "m3u8"
                  ? "application/x-mpegURL"
                  : "video/" + this.fileType, // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
              src: this.mp4Url, // 视频url地址
            },
          ],
          hls: true,
          poster: this.mp4Pic, // 视频封面地址
          // width: document.documentElement.clientWidth,
          height: this.fileAreaHeight, // 设置高度，fluid需要设置成flase
          notSupportedMessage: this.$t("public.videoCannotPlayed"), // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            // volumeControl: true,
            timeDivider: true, //当前时间和持续时间的分隔符
            durationDisplay: true, //显示持续时间
            remainingTimeDisplay: false, //是否显示剩余时间功能
            fullscreenToggle: true, //全屏按钮
          },
        };
        return playerOptionsObj;
      } else {
        return {};
      }
    },
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  watch: {},
  mounted() {
    document.oncontextmenu = () => false;
    document.getElementsByTagName("video").item(0).controlsList = "nodownload";
  },
  methods: {
    // 添加全屏事件
    // handlefullscreenchange(val) {
    //   if (val.isFullscreen_ == false) {
    //     setTimeout(() => {
    //       this.player.play();
    //     }, 800);
    //   }
    // },
    onPlay(time) {
      setTimeout(() => {
        if (time) {
          this.player.currentTime(parseFloat(time)); //跳转
        }
        this.player.play();
      }, 600);
    },
    // 监听播放 当视频播放时，执行的方法
    onPlayerPlay() {
      this.playState = true;
      // this.$refs.videoPlayer.player.play(); // 播放
      // 播放的时候判断一下 有没有 清晰度这个按钮
      // !this.$('#vjsControl')
      if (!document.getElementById("vjsControl") && this.isDpi) {
        this.addTool("dpi");
      }
      if (!document.getElementById("vjsLike") && this.islike !== undefined) {
        this.addTool("like");
      }
    },
    addTool(tool) {
      if (tool == "dpi") {
        let isDpi = this.mp4Url.indexOf("700kb") != -1;
        if (isDpi) {
          $(".vjs-control-bar").append(
            `<div class="vjs-control vjs-dpi-rate vjs-menu-button " id="vjsControl"><select @change="resolutionChange(this.options[this.options.selectedIndex].text)">
              <option value ="volvo" style="color: white">${this.$t(
                "videoPlayer.HD"
              )}</option>
              <option value ="saab">${this.$t("videoPlayer.SD")}</option>' +
              </select></div>`
          );
        } else {
          $(".vjs-control-bar").append(
            `<div class="vjs-control vjs-dpi-rate vjs-menu-button " id="vjsControl"><select @change="resolutionChange(this.options[this.options.selectedIndex].text)">
              <option value ="volvo" style="color: white">${this.$t(
                "videoPlayer.SD"
              )}</option>
              <option value ="saab">${this.$t("videoPlayer.HD")}</option>
              </select></div>`
          );
        }

        // $(".vjs-control-bar").append(
        //   `<button class='vjs-control vjs-dpi-rate vjs-menu-button' id='vjsControl'>${
        //     isDpi ? this.$t("videoPlayer.HD") : this.$t("videoPlayer.SD")
        //   }</button>`
        // );
        $("#vjsControl").bind("change", this.resourceClick);
      } else if (tool == "like") {
        $(".vjs-control-bar").append(
          `<button class='vjs-control vjs-like-rate vjs-menu-button ${
            this.islike == 1 ? "el-icon-star-on" : "el-icon-star-off"
          }' id='vjsLike'></button>`
        );
        let vjsLike = document.getElementById("vjsLike");
        vjsLike.addEventListener("click", this.likeClick);
      }

      // document.addEventListener()
    },
    // 切换资源
    resourceClick() {
      this.dpiText = $("#vjsControl").find("option:selected").text();
      let ctime = this.player.currentTime();
      if (this.dpiText === this.$t("videoPlayer.SD")) {
        this.$emit("toggleQuality", "200");
        // $("#vjsControl").text(this.$t("videoPlayer.HD"));
        // this.$refs.videoPlayer.player.src(this.mp4Url);
        // this.$emit("toggleQuality", "700");
        // this.playerOptions.sources[0].src = '';
      } else if (this.dpiText === this.$t("videoPlayer.HD")) {
        this.$emit("toggleQuality", "700");
        // $("#vjsControl").text(this.$t("videoPlayer.SD"));
        // this.$refs.videoPlayer.player.src(this.mp4Url);
        // this.$emit("toggleQuality", "200");
      }
      this.$nextTick(() => {
        this.onPlay(ctime);
      });
    },
    async likeClick() {
      let users = {
        type: 2,
      };
      if ($("#vjsLike").hasClass("el-icon-star-on")) {
        $("#vjsLike").removeClass("el-icon-star-on");
        $("#vjsLike").addClass("el-icon-star-off");
        let params = {
          contentIds: this.$route.params.id,
          selectState: 2, //未全选
        };
        await this.$api.user.cancelVideo({ ...users, ...params });
        this.$message({
          showClose: true,
          message: this.$t("public.cancelLike"),
          type: "warning",
        });
        // $("#vjsLike").attr("name", "like");
      } else {
        $("#vjsLike").removeClass("el-icon-star-off");
        $("#vjsLike").addClass("el-icon-star-on");
        let params = {
          contentId: this.$route.params.id,
        };
        await this.$api.user.addVideo({ ...users, ...params });
        this.$message({
          showClose: true,
          message: this.$t("public.likeSuccess"),
          type: "success",
        });
        // $("#vjsLike").attr("name", "is-like");
      }
    },
    toTime(time) {
      this.player.currentTime(this.utils.formatTimestamp(time));
    },
    onPlayerPause() {
      // 当视频暂停播放时，执行的方法
      this.playState = false;
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    // playerReadied(player) {
    // if(player != undefined && this.time != undefined) {
    //   player.currentTime(this.time);
    // }
    // player.currentTime(time);
    // seek to 10s
    // player.currentTime('40');
    // console.log('example 01: the player is readied', player)
    // },
  },
};
</script>

<style lang="scss" scoped>
.video {
  // width: 920px;
  // height: 517px;
  // position: relative;
  // padding-top: 70px;
  /*对画面静止的样式进行设置放大一倍*/
  // .vjs-poster {
  //   transform: scale(2);
  // }
  // /*对画面播放的样式进行设置放大一倍*/
  // .vjs-tech {
  //   transform: scale(2);
  // }
  // /*对播放按钮的样式进行设置*/
  // .video-js .vjs-big-play-button {
  //   width: 80px;
  //   height: 100%;
  //   //   border-radius: 10px;
  // }
}
</style>
<style lang="scss">
// .video-js {
//   &:hover .vjs-big-play-button {
//     background-color: rgba(161, 50, 44, 0.9);
//     &:focus {
//       background-color: rgba(161, 50, 44, 1);
//     }
//   }
// }
// 去掉大屏播放按钮
// .vjs-custom-skin > .video-js .vjs-big-play-button {
//   display: none;
// }
// .vjs-custom-skin > .video-js .vjs-control-bar {
//   // 控制器置底
//   position: static;
//   align-items: center;
//   // 播放暂停
//   .vjs-play-control {
//     font-size: 16px;
//   }
//   //进度条
//   .vjs-progress-control {
//     order: 1;
//     .vjs-slider {
//       .vjs-play-progress {
//         background-color: #a1322c;
//       }
//     }
//   }
//   // 时间控制
//   .vjs-time-control {
//     width: auto;
//     order: 2;
//   }
//   // 声音控制器
//   .vjs-volume-panel {
//     order: 3;
//     .vjs-volume-control {
//     }
//   }
//   // 切换清晰度
//   .vjs-dpi-rate {
//     height: 24px;
//     order: 4;
//     border: 1px solid #fff;
//     margin: 0 10px;
//   }
//   // 添加喜欢
//   .vjs-like-rate {
//     order: 5;
//     font-size: 20px;
//   }
//   // 倍速
//   .vjs-playback-rate {
//     order: 6;
//   }
//   // 全屏按钮
//   .vjs-fullscreen-control {
//     order: 7;
//   }
//   .vjs-time-tooltip {
//     width: auto;
//   }
// }
</style>
